import ChartBase from "./chart-base";
import { deepClone, mergeObject } from "@/utils";

export default class KpiSingle extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "KPI",
    type: "kpi-single", // 图表类型

    group: "kpi", // 图表分类
    component: "kpi-single",
    icon: "kpi-single", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    tableField: [
      /*
        {
          key: '',
          fieldName: '',
          fieldDescribe: ''
        }
      */
    ],
    tableData: [],
    config: {
      kpi: {
        delimiter: "", // 分割符
        reserve: false, // 标签 和 数值 位置互换
        thousands: true, // 千分符
      },
      icon: {
        show: true,
        size: 24,
        backgroundSize: 48,
        position: 16,
        type: "icon",
        content: "icon-changshangguanli",
      },
      label: {
        position: "4px",
        height: 24,
        isBold: false,
      },
      value: {
        height: 20,
        isBold: false,
      },
    },
    style: {
      layout: {
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "flex-start",
      },
      contentLayout: {
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
      },
      iconBackground: {
        backgroundColor: "#fff",
        borderRadius: "4px",
      },
      icon: {
        color: "#ffffff",
      },
      label: {
        color: "#303133",
        fontSize: "24px",
        fontWeight: "bold",
      },
      value: {
        color: "#606266",
        fontSize: "24px",
        fontWeight: "bold",
      },
    },
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "字段",
      key: "tableField",
      type: ["string", "date", "number"],
      limit: -1,
    },
  ];

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: "KPI配置",
      bindKeys: "_group.layout",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "排版",
      bindKeys: "style.layout.flexDirection",
      controlType: "select",
      controlValue: "row",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "纵向",
            value: "column",
          },
          {
            label: "横向",
            value: "row",
          },
        ],
      },
    },
    {
      label: "主轴对齐",
      bindKeys: "style.layout.justifyContent",
      controlType: "select",
      controlValue: "center",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "行首对齐",
            value: "flex-start",
          },
          {
            label: "行尾对齐",
            value: "flex-end",
          },
          {
            label: "中点对齐",
            value: "center",
          },
          {
            label: "两边对齐",
            value: "space-between",
          },
          {
            label: "均匀分布",
            value: "space-around",
          },
        ],
      },
    },
    {
      label: "交叉轴对齐",
      bindKeys: "style.layout.alignItems",
      controlType: "select",
      controlValue: "center",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "行首对齐",
            value: "flex-start",
          },
          {
            label: "行尾对齐",
            value: "flex-end",
          },
          {
            label: "中点对齐",
            value: "center",
          },
          {
            label: "两边对齐",
            value: "space-between",
          },
          {
            label: "均匀分布",
            value: "space-around",
          },
        ],
      },
    },
    {
      label: "图标配置",
      bindKeys: "_group.icon",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "显示",
      bindKeys: "config.icon.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "图标",
      bindKeys: "config.icon.content",
      controlType: "icon",
      controlValue: "icon-changshangguanli",
      controlProps: {},
      controlConfigs: {
        options: [
          "icon-zichanxiaxianshu",
          "icon-zichanshangxianshu",
          "icon-zichanzongshu",
          "icon-rilizuobiaoxi",

          "icon-dingdanxiangqing",
          "icon-minganbiaozongshu",
          "icon-minganbiaoziduanzongshu",
          "icon-minganguize",

          "icon-shujuquanxian",
          "icon-shujukuzuguanli",
          "icon-shujukuguanli",
          "icon-database",

          "icon-yonghuguanli-1",
          "icon-zichanzongshu1",
          "icon-yingyongshu",
          "icon-renwu",

          "icon-changshangguanli",
          "icon-biaoqianguanli",
          "icon-kehuduan",
          "icon-wodeliucheng1",

          "icon-zhujishu",
          "icon-anquanshebeishu",
          "icon-wangluoshebeishu",
          "icon-yichuligaojingshu1",

          "icon-gaojigaojingshu",
          "icon-zhongjigaojingshu",
          "icon-dijigaojingshu",
          "icon-gaojingzongshu1",
        ],
      },
    },
    {
      label: "图标大小",
      bindKeys: "config.icon.size",
      controlType: "input-number",
      controlValue: 24,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "颜色",
      bindKeys: "style.icon.color",
      controlType: "color-picker",
      controlValue: "#ffffff",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "与文字间距",
      bindKeys: "config.icon.position",
      controlType: "input-number",
      controlValue: 16,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "背景大小",
      bindKeys: "config.icon.backgroundSize",
      controlType: "input-number",
      controlValue: 56,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "背景颜色",
      bindKeys: "style.iconBackground.backgroundColor",
      controlType: "color-picker",
      controlValue: "#ff7f7f",
      controlProps: {},
      controlConfigs: {},
    },

    {
      label: "文字配置",
      bindKeys: "_group.contentLayout",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分隔符",
      bindKeys: "config.kpi.delimiter",
      controlType: "input",
      controlValue: "",
      controlProps: {
        placeholder: "分隔符",
      },
      controlConfigs: {},
    },
    {
      label: "文字间距",
      bindKeys: "config.label.position",
      controlType: "input",
      controlValue: "4px",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "排版",
      bindKeys: "style.contentLayout.flexDirection",
      controlType: "select",
      controlValue: "column",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "纵向",
            value: "column",
          },
          {
            label: "横向",
            value: "row",
          },
        ],
      },
    },
    {
      label: "位置互换",
      bindKeys: "config.kpi.reserve",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "主轴对齐",
      bindKeys: "style.contentLayout.justifyContent",
      controlType: "select",
      controlValue: "center",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "行首对齐",
            value: "flex-start",
          },
          {
            label: "行尾对齐",
            value: "flex-end",
          },
          {
            label: "中点对齐",
            value: "center",
          },
          {
            label: "两边对齐",
            value: "space-between",
          },
          {
            label: "均匀分布",
            value: "space-around",
          },
        ],
      },
    },
    {
      label: "交叉轴对齐",
      bindKeys: "style.contentLayout.alignItems",
      controlType: "select",
      controlValue: "flex-start",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "行首对齐",
            value: "flex-start",
          },
          {
            label: "行尾对齐",
            value: "flex-end",
          },
          {
            label: "中点对齐",
            value: "center",
          },
          {
            label: "两边对齐",
            value: "space-between",
          },
          {
            label: "均匀分布",
            value: "space-around",
          },
        ],
      },
    },

    {
      label: "主标题配置",
      bindKeys: "_group.label",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分隔符",
      bindKeys: "config.label.delimiter",
      controlType: "input",
      controlValue: "/",
      controlProps: {
        placeholder: "分隔符",
      },
      controlConfigs: {},
    },
    {
      label: "文字大小",
      bindKeys: "style.label.fontSize",
      controlType: "input",
      controlValue: "20px",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "文字颜色",
      bindKeys: "config.label.color",
      controlType: "color-picker",
      controlValue: "#303133",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "文字加粗",
      bindKeys: "style.label.fontWeight",
      controlType: "select",
      controlValue: "normal",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "普通",
            value: "normal",
          },
          {
            label: "粗体",
            value: "bold",
          },
        ],
      },
    },
    {
      label: "文字高度",
      bindKeys: "config.label.height",
      controlType: "input-number",
      controlValue: 34,
      controlProps: {},
      controlConfigs: {},
    },

    {
      label: "次标题配置",
      bindKeys: "_group.value",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分隔符",
      bindKeys: "config.value.delimiter",
      controlType: "input",
      controlValue: "/",
      controlProps: {
        placeholder: "分隔符",
      },
      controlConfigs: {},
    },
    {
      label: "文字大小",
      bindKeys: "style.value.fontSize",
      controlType: "input",
      controlValue: "14px",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "文字颜色",
      bindKeys: "style.value.color",
      controlType: "color-picker",
      controlValue: "#606266",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "文字加粗",
      bindKeys: "style.value.fontWeight",
      controlType: "select",
      controlValue: "normal",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "普通",
            value: "normal",
          },
          {
            label: "粗体",
            value: "bold",
          },
        ],
      },
    },
    {
      label: "文字高度",
      bindKeys: "config.value.height",
      controlType: "input-number",
      controlValue: 30,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "千分符",
      bindKeys: "config.kpi.thousands",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
  ];

  getOption({
    dataList = [],
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
  }) {
    let defaultOption = deepClone(this._defaultOption);

    let option = this._transformStyleOptionConfig(styleOptionConfig);

    defaultOption.tableField = dataPoolField["tableField"];
    defaultOption.tableData = dataList;

    let colorLabelConfig = [],
      colorValuecConfig = [];

    // if (defaultOption.tableField.length) {
    //   for (let i = 1; i < defaultOption.tableField.length; i++) {
    //     colorLabelConfig.push({
    //       label: "文字颜色",
    //       bindKeys: "config.label.color",
    //       controlType: "color-picker",
    //       controlValue: "#303133",
    //       controlProps: {},
    //       controlConfigs: {},
    //     });
    //     colorValuecConfig.push({
    //       label: "文字颜色",
    //       bindKeys: "config.value.color",
    //       controlType: "color-picker",
    //       controlValue: "#303133",
    //       controlProps: {},
    //       controlConfigs: {},
    //     });
    //   }

    //   styleOptionConfig = [
    //     ...this._styleOptionConfig.slice(0, 23),
    //     ...colorLabelConfig,
    //     ...this._styleOptionConfig.slice(23, 32),
    //   ];

    // }

    if (defaultOption && option) {
      defaultOption = mergeObject(defaultOption, option);
    }

    return defaultOption;
  }
}
